import { Component } from "react";

class HelloWorld extends Component {
  // 1. 执行构造函数
  constructor() {
    super()
    console.log('组件2执行构造函数');

    this.state = {
      message: 'Hello World'
    }
  }
  changeMessage() {
    this.setState({
      message: '你好世界'
    })
    console.log('执行setState');
  }
  // 2. 执行render函数
  // setState后会重新执行render函数
  render() {
    console.log('组件2执行render函数');
    const { message } = this.state
    return (
      <>
      <div>{ message }</div>
      <button onClick={() => this.changeMessage()}>改变文本</button>
      </>
    )
  }

  // 3. 组件被渲染到DOM
  componentDidMount() {
    console.log('组件2渲染,执行componentDidMount');
  }

  // 4. 组件更新
  componentDidUpdate(prevProps, prevState, snapShot) {
    console.log('组件2更新,执行componentDidUpdate');
  }

  // 5. 组件卸载
  componentWillUnmount() {
    console.log('组件2卸载,执行componentWillUnmount');
  }

  // 是否重新渲染
  shouldComponentUpdate() {
    return false
  }

  // 在组件更新前执行
  // 可以获取更新前的DOM状态，比如滚动高度
  getSnapshotBeforeUpdate() {
    return {
      scrollPosition: 1000
    }
  }
}

export default HelloWorld